<template>
  <div class="main1">
    <div class="checkhead">
      <h1 class="stitle">货物动态查询</h1>
      <div class="search">
        <input type="text" v-model="billNum" placeholder="请输入提单号或集装箱号">
        <a @click="search">
          <x-icon type="ios-search-strong" size="32" class="btnsearch"></x-icon>
        </a>
      </div>
    </div>
    <div class="checkpic" v-if="!list || list.length == 0">
      <p>可通过提单号或集装箱号，查询货物状态跟物流信息。</p>
      <img src="../assets/images/check.png" alt>
    </div>

    <div class="wuliu" v-else>
      <timeline>
        <timeline-item class="oneitem lastest" v-for="(item, index) in list" v-bind:key="index">
          <h4 class="recent" v-bind:class="{'bluefont': index === 0}">{{item.status}}</h4>
          <p class="recent">{{item.portName}}</p>
          <div class="checkdate">
            <span>{{item.date}}</span>
            <br>
            {{item.time}}
          </div>
        </timeline-item>
      </timeline>
    </div>

    <router-view name="footer"></router-view>
  </div>
</template>
<script>
import { cookie } from "vux";

export default {
  name: "check_good_dynamic",
  data() {
    return {
      billNum: "",
      list: []
    };
  },
  methods: {
    search() {
      // let userInfo = cookie.get("userinfo");
      // userInfo = userInfo ? JSON.parse(userInfo) : {};
      let billNum = this.billNum;
      if (!billNum) {
        this.$vux.toast.text("请输入提单号或集装箱号");
        return;
      }
      this.$http({
        url: "/infService/goodDynamic",
        // headers: {
        //   "x-token": userInfo.token
        // },
        params: {
          billNum: billNum
        }
      }).then(resp => {
        if (resp.code === 200) {
          this.list = resp.data;
        } else {
          this.$vux.toast.text(resp.message);
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

